<template>
	<div>
		<uploader :key="uploader_key" :options="options" :file-status-text="statusText" class="uploader-example" @file-success="onFileSuccess" >
			<uploader-unsupport></uploader-unsupport>
			<uploader-drop>
				<uploader-btn v-show="isDirectory==false" :directory="false" :single="isSingle">上传文件</uploader-btn>

				<uploader-btn v-show="isDirectory==true" :directory="true" :single="isSingle">上传文件夹</uploader-btn>
				<!-- <van-icon name="exchange" style="float: right;padding-top: 5px;" size="15" @click="change()" /> -->
			</uploader-drop>
	
			<uploader-list>
				<template slot-scope="props">

				
					<div v-for="file in props.fileList" :list="true" :key="file.id" >
							<uploader-file :file="file"  ref="uploaderFile" style="height: auto;">
								<template slot-scope="props" style="height: auto;">
								<div style="padding-top: 0%; font-size: 15px;padding-left: 1%;">
									<van-row style="text-align: left;height: 25px;">
									
										<van-icon :name="file.isFolder?'/img/dir.png':'/img/file.png'" size="20" />
										{{file.name}}
									</van-row>
									<van-row style="height: 40px;" >
										<!-- 剩余{{props.formatedTimeRemaining}}s-->
										<!-- <span v-show="parseInt(props.progressStyle.progress)!=100&&props.isUploading">约剩余时间:{{props.formatedTimeRemaining}}</span> -->
										<span v-show="parseInt(props.progressStyle.progress)>=90&&parseInt(props.progressStyle.progress)<=100&&props.isUploading">正在合并文件</span>
										{{setUploadStatus(props.isUploading)}}
										<span style="float: right;" >总大小:{{props.formatedSize}}</span>
									</van-row>
									<van-row style="height: 20px;">
										<van-progress  :percentage="parseInt(props.progressStyle.progress)" stroke-width="20" />
									</van-row>
								</div>
								</template>
							</uploader-file>
				 	</div >
					
	
					
					</ul>
				</template>


			</uploader-list>
		</uploader>
	</div>
</template>

<script>
	import common from '../js/common.js'
	let suffix;
	export default {
		props: {
			suffix: String
		},
		data() {
			return {
			uploadStatus:false,
			statusText: {
			  success: '成功',
			  error: '错误',
			  uploading: '上传中',
			  paused: '暂停中',
			  waiting: '等待中'
			},
				uploadTitle: "上传文件",
				isDirectory: false,
				isSingle: true,
				uploader_key: 'uploader_key', //new Date().getTime(), //这个用来刷新组件--解决不刷新页面连续上传的缓存上传数据（注：每次上传时，强制这个值进行更改---根据自己的实际情况重新赋值）
				options: {
					target: common.BASE_URL + '/netDisk/uploadFile', //SpringBoot后台接收文件夹数据的接口
					testChunks: false,
					query: function(file, res, status) {
						console.log(file)
						return {
							"suffix": suffix == '/' ? "" : suffix
						}
					},
					headers: {
						'authKey': localStorage.getItem('key')
					},
					chunkSize:30*1024*1024

				}
			}
		},
		mounted() {
			suffix = this.suffix;
			// this.uploader=this.;
		},
		methods: {
			setUploadStatus(data){
				this.uploadStatus=data
			},
			change() {
				if (this.isDirectory == true) {
					this.isDirectory = false;
					this.uploadTitle = "上传文件"
				} else {
					this.isDirectory = true;
					this.uploadTitle = "上传文件夹"
				}
			},
			onFileSuccess: function(rootFile, file, response, chunk) {
				console.log(response)
				//这里可以根据response（接口）返回的数据处理自己的实际问题（如：从response拿到后台返回的想要的数据进行组装并显示）
				//注，这里从文件夹每上传成功一个文件会调用一次这个方法
			},
			getFileList(data){
				console.log(JSON.stringify(data))
			}
		}
	}
</script>

<style>
	.uploader-example {
		width: 90%;
		padding: 15px;
		margin: 40px auto 0;
		font-size: 12px;
		box-shadow: 0 0 10px rgba(0, 0, 0, .4);
	}

	.uploader-example .uploader-btn {
		margin-right: 4px;
	}

	.uploader-example .uploader-list {
		max-height: 440px;
		overflow: auto;
		overflow-x: hidden;
		overflow-y: auto;
	}
</style>
